<template>
    <div>
        <div :style="{height: 20 + 'px'}"></div>
        <Leaderboard title="物料运输排行(TOP.5)" desc="物料运输排行" @event-more="handleMore" :data="data" />
        <div :style="{height: 20 + 'px'}"></div>
        <Leaderboard
            title="物料运输排行(TOP.5)"
            desc="物料运输排行"
            :is-more="false"
            gradual-class-name="gradual2"
            :data="data" />
    </div>
</template>

<script setup>
import Leaderboard from '../components/Leaderboard.vue';
const data = [
    {
        name: '名称撒实的是撒的',
        unit: '吨',
        value: 100,
    },
    {
        name: '名称salads',
        unit: '吨',
        value: 130,
    },
    {
        name: '名称as3',
        unit: '吨',
        value: 120,
    },
    {
        name: '名称4',
        unit: '吨',
        value: 102,
    },
    {
        name: '名称5',
        unit: '吨',
        value: 10,
    },
];

const handleMore = () => {
    alert(123);
};
</script>

<style lang="css" scoped>
:deep(.gradual2) {
    background: linear-gradient(270deg, #ffc741 0%, #ff7323 100%) !important;
}
</style>
